<template>
  <div> 
    <div class="top_img">
       <img src="../../public/img/wy_01.jpg" alt="">
       <h4>{{name}}</h4>
       <h4 v-if="!name">居家</h4>
    </div>
    <div class="mytitle">
      <div class="mytitle_po">
        <span></span>
        <h3> {{name}}</h3>
        <h3 v-if="!name">居家</h3>
      </div>
    </div>

    <div class="buttom">
        <div class="div_li" v-for="item in goodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="">
            <span>{{item.name}}</span>
        </div>

        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_01.png" alt="">
            <span>布艺软装</span>
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_02.png" alt="">
             <span>被枕</span>
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_03.png" alt="">
            <span>床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套</span> 
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_01.png" alt="">
            <span>布艺软装</span>
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_02.png" alt="">
             <span>被枕</span>
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_03.png" alt="">
            <span>床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套</span> 
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_01.png" alt="">
            <span>布艺软装</span>
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_02.png" alt="">
             <span>被枕</span>
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_03.png" alt="">
            <span>床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套床品件套</span> 
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_01.png" alt="">
            <span>布艺软装</span>
        </div>
        <div class="div_li" v-if="!name">
          <img src="../../public/img/wy_02.png" alt="">
             <span>被枕</span>
        </div>
    </div> 
  </div>
</template>

<script>
export default {
    name:'classification_right', 
    props:['id','name','goodsList'], 
    mounted(){ 
        console.log(this.goodsList); 
    }
    
}
</script>

<style  lang="less" scoped>
  .top_img{ 
    width: 100%;
    height:140px; 
    position: relative;
    overflow: hidden;
    img{
      width: 100%;
      height:100%;
      display: block;
      margin: 0px auto ;
    }
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 100%; 
      float: left;
      position: absolute;
      background-color: black;
      opacity: 0.4;
      border-radius: 10px;
    }
    h4{
      color: white;
      position: absolute;
      top: 25%;
      left: 45%;
    }
  }

  .mytitle{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px; 
    background-color: white;
    position: relative;
    .mytitle_po{
      height: 40px;
      width: 280px; 
      position: absolute;
      left: calc(50% - 140px);
      h3{
        position: absolute;
        margin: 0;
        padding: 0;
        z-index: 100; 
        width: 80px;
        height: 100%;
        background-color: white;
        margin-left: 100px; 
        top: 0;
      }
      span{
        position: absolute;
        top: 18px; 
        display: block;
        width: 160px;
        height: 5px;
        background-color: #ccc;
        margin-left: 60px; 
        
      }
    }
  }

  .div_li{
    width: 33.3%; 
    height: 90px;
    float: left;  
    position: relative; 
    border-bottom: 1px solid pink;  
    border-right: 1px solid pink;
    box-sizing: border-box;
    img{
      width: 28px;
      display: block; 
      position: absolute;
      top: 18%;
      left: 45%;
    }
    span{
      display: block; 
      width: 50%;
      height: 30px; 
      text-align: center;
      line-height: 30px;
      overflow: hidden;
      // white-space:nowrap;
      // text-overflow:ellipsis ;
      position: absolute;
      top: 50%;
      left: 27%;
    }
  }
  .div_li:nth-child(3n){
    border-right: none;
  }
  .div_li:nth-child(3n+1){
    border-left: 1px solid pink;
  }

</style>